import React from 'react';
import { Typography, Space, Divider } from 'antd';
import '../style.css';

const { Title, Paragraph, Text, Link } = Typography;

// Typography 排版组件教程
const TypographyTutorial = () => {
  return (
    <div className="tutorial-container">
      <h1>Typography 排版组件</h1>

      {/* 1. 标题组件 */}
      <section className="example-section">
        <h2>1. 标题组件 (Title)</h2>
        <div className="section-description">
          Title 组件提供了 h1-h5 五个级别的标题，对应 level 属性值为 1-5
        </div>
        <Space direction="vertical">
          <Title level={1}>h1. Ant Design</Title>
          <Title level={2}>h2. Ant Design</Title>
          <Title level={3}>h3. Ant Design</Title>
          <Title level={4}>h4. Ant Design</Title>
          <Title level={5}>h5. Ant Design</Title>
        </Space>
      </section>

      {/* 2. 文本组件 */}
      <section className="example-section">
        <h2>2. 文本组件 (Text)</h2>
        <div className="section-description">
          Text 组件用于处理行内文本的样式
        </div>
        <Space direction="vertical">
          <Text>默认文本</Text>
          <Text type="secondary">次要文本</Text>
          <Text type="success">成功文本</Text>
          <Text type="warning">警告文本</Text>
          <Text type="danger">错误文本</Text>
          <Text disabled>禁用文本</Text>
          <Text mark>标记文本</Text>
          <Text code>代码文本</Text>
          <Text keyboard>键盘文本</Text>
          <Text underline>下划线文本</Text>
          <Text delete>删除线文本</Text>
          <Text strong>加粗文本</Text>
          <Text italic>斜体文本</Text>
        </Space>
      </section>

      {/* 3. 段落组件 */}
      <section className="example-section">
        <h2>3. 段落组件 (Paragraph)</h2>
        <div className="section-description">
          Paragraph 组件用于处理段落文本，支持自动溢出省略等特性
        </div>
        <Paragraph>
          这是一个普通段落。蚂蚁集团的企业级产品是一个庞大且复杂的系统，这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
        </Paragraph>
        
        <Paragraph ellipsis={{ rows: 2 }}>
          这是一个带省略的段落。蚂蚁集团的企业级产品是一个庞大且复杂的系统，这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。在过去的经验中，我们发现产品的用户体验有一个很大的制约因素来自于面向不同的用户群体。我们目前已经建立起一套稳定的设计系统，这套设计系统包含了一套基础的视觉系统。
        </Paragraph>

        <Paragraph copyable>
          这是一个可复制的段落。点击右侧的图标即可复制文本内容。
        </Paragraph>
      </section>

      {/* 4. 可交互文本 */}
      <section className="example-section">
        <h2>4. 可交互文本</h2>
        <div className="section-description">
          Typography 组件支持可编辑文本和可复制文本
        </div>
        <Space direction="vertical">
          <Paragraph editable={{ onChange: (str) => console.log(str) }}>
            这是一段可编辑的文本，点击编辑图标即可进行编辑。
          </Paragraph>

          <Text copyable>这是一段可复制的文本</Text>
        </Space>
      </section>

      {/* 5. 链接组件 */}
      <section className="example-section">
        <h2>5. 链接组件 (Link)</h2>
        <Space>
          <Link href="https://ant.design" target="_blank">
            Ant Design 官网
          </Link>
          <Link href="https://ant.design" target="_blank" type="secondary">
            次要链接
          </Link>
        </Space>
      </section>
    </div>
  );
};

export default TypographyTutorial; 